<!DOCTYPE html>

<html
  xmlns="http://www.w3.org/1999/xhtml"
  >
  <head>
    <title>Bubble map &#8211; from Data to Viz</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="pandoc" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="An extensive description of Bubble
map. Definition, examples, input data, common caveats, tool to build it and potential alternatives."
    />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Plot,Chart,Graph,R,Python,D3,Learning,Caveat,Pitfall,Mistake,Classification"
    />
    <meta name="author" content="Yan Holtz and Conor Healy" />
    <link rel="icon" href="img/logo/data-to-viz.ico" />

    <!-- Control appearance when share by social media -->
    <meta property="og:title" content="Bubble map" />
    <meta
      property="og:image"
      content="https://github.com/holtzy/data_to_viz/raw/master/img/section/BubbleMapSmall.png"
    />
    <meta
      property="og:description"
      content="An extensive description of Bubble
map. Definition, examples, input data, common caveats, tool to build it and potential alternatives."
    />
    <meta
      property="og:url"
      content="www.data-to-viz.com/caveat/bubblemap.html"
    />
    <meta property="og:type" content="website" />

    <style>
      .myheader {
        background-image: url("https://github.com/holtzy/data_to_viz/raw/master/img/overview_RGG_faded.png");
        min-height: 300px;
        background-size: 100% 100%;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        height: 100%;
        width: 100% !important;
      }
      .mytitle {
        text-transform: uppercase;
        font-family: "Montserrat";
        font-size: 200%;
        font-weight: 500;
        letter-spacing: 4px;
      }
    </style>

    <div class="myheader" style="text-align: center">
      <br />
      <a href="http://www.data-to-viz.com"
        ><img
          align="left"
          src="https://github.com/holtzy/data_to_viz/raw/master/img/logo/typo.png"
          style="width: 150px; vertical-align: top; margin-left: 5%"
      /></a>
      <br /><br />
      <br /><br />
      <a href="http://www.data-to-viz.com">
        <img
          src="https://github.com/holtzy/data_to_viz/raw/master/img/section/BubbleMapSmall.png"
      /></a>
      <br /><br />
      <p class="mytitle">Bubble map</p>
      <p style="color: #d0d0d0">
        <a href="#definition">definition</a> - <a href="#mistake">mistake</a> -
        <a href="#related">related</a> -
        <a href="#code">code</a>
      </p>
    </div>

         <script src="libs/header-attrs-2.27/header-attrs.js"></script>
<script src="libs/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap-3.3.5/css/lumen.min.css" rel="stylesheet" />
<script src="libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<style>h1 {font-size: 34px;}
       h1.title {font-size: 38px;}
       h2 {font-size: 30px;}
       h3 {font-size: 24px;}
       h4 {font-size: 18px;}
       h5 {font-size: 16px;}
       h6 {font-size: 12px;}
       code {color: inherit; background-color: rgba(0, 0, 0, 0.04);}
       pre:not([class]) { background-color: white }</style>
<script src="libs/navigation-1.1/tabsets.js"></script>
<script src="libs/navigation-1.1/codefolding.js"></script>
<link href="libs/pagedtable-1.1/css/pagedtable.css" rel="stylesheet" />
<script src="libs/pagedtable-1.1/js/pagedtable.js"></script>
<link href="libs/htmltools-fill-0.5.8.1/fill.css" rel="stylesheet" />
<script src="libs/htmlwidgets-1.6.4/htmlwidgets.js"></script>
<link href="libs/leaflet-1.3.1/leaflet.css" rel="stylesheet" />
<script src="libs/leaflet-1.3.1/leaflet.js"></script>
<link href="libs/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<script src="libs/proj4-2.6.2/proj4.min.js"></script>
<script src="libs/Proj4Leaflet-1.0.1/proj4leaflet.js"></script>
<link href="libs/rstudio_leaflet-1.3.1/rstudio_leaflet.css" rel="stylesheet" />
<script src="libs/leaflet-binding-2.2.2/leaflet.js"></script>
<script src="libs/leaflet-providers-2.0.0/leaflet-providers_2.0.0.js"></script>
<script src="libs/leaflet-providers-plugin-2.2.2/leaflet-providers-plugin.js"></script>       <style type="text/css">
      code {
        white-space: pre;
      }
    </style>
    <style type="text/css">
      pre > code.sourceCode { white-space: pre; position: relative; }
      pre > code.sourceCode > span { line-height: 1.25; }
      pre > code.sourceCode > span:empty { height: 1.2em; }
      .sourceCode { overflow: visible; }
      code.sourceCode > span { color: inherit; text-decoration: inherit; }
      div.sourceCode { margin: 1em 0; }
      pre.sourceCode { margin: 0; }
      @media screen {
      div.sourceCode { overflow: auto; }
      }
      @media print {
      pre > code.sourceCode { white-space: pre-wrap; }
      pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
      }
      pre.numberSource code
        { counter-reset: source-line 0; }
      pre.numberSource code > span
        { position: relative; left: -4em; counter-increment: source-line; }
      pre.numberSource code > span > a:first-child::before
        { content: counter(source-line);
          position: relative; left: -1em; text-align: right; vertical-align: baseline;
          border: none; display: inline-block;
          -webkit-touch-callout: none; -webkit-user-select: none;
          -khtml-user-select: none; -moz-user-select: none;
          -ms-user-select: none; user-select: none;
          padding: 0 4px; width: 4em;
          color: #aaaaaa;
        }
      pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
      div.sourceCode
        {   }
      @media screen {
      pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
      }
      code span.al { color: #ff0000; font-weight: bold; } /* Alert */
      code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
      code span.at { color: #7d9029; } /* Attribute */
      code span.bn { color: #40a070; } /* BaseN */
      code span.bu { color: #008000; } /* BuiltIn */
      code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
      code span.ch { color: #4070a0; } /* Char */
      code span.cn { color: #880000; } /* Constant */
      code span.co { color: #60a0b0; font-style: italic; } /* Comment */
      code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
      code span.do { color: #ba2121; font-style: italic; } /* Documentation */
      code span.dt { color: #902000; } /* DataType */
      code span.dv { color: #40a070; } /* DecVal */
      code span.er { color: #ff0000; font-weight: bold; } /* Error */
      code span.ex { } /* Extension */
      code span.fl { color: #40a070; } /* Float */
      code span.fu { color: #06287e; } /* Function */
      code span.im { color: #008000; font-weight: bold; } /* Import */
      code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
      code span.kw { color: #007020; font-weight: bold; } /* Keyword */
      code span.op { color: #666666; } /* Operator */
      code span.ot { color: #007020; } /* Other */
      code span.pp { color: #bc7a00; } /* Preprocessor */
      code span.sc { color: #4070a0; } /* SpecialChar */
      code span.ss { color: #bb6688; } /* SpecialString */
      code span.st { color: #4070a0; } /* String */
      code span.va { color: #19177c; } /* Variable */
      code span.vs { color: #4070a0; } /* VerbatimString */
      code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
            div.sourceCode {
        overflow-x: visible;
      }
          </style>
        <style type="text/css">
      pre:not([class]) {
        background-color: white;
      }
    </style>
           <style type="text/css">
      h1 {
        font-size: 34px;
      }
      h1.title {
        font-size: 38px;
      }
      h2 {
        font-size: 30px;
      }
      h3 {
        font-size: 24px;
      }
      h4 {
        font-size: 18px;
      }
      h5 {
        font-size: 16px;
      }
      h6 {
        font-size: 12px;
      }
      .table th:not([align]) {
        text-align: left;
      }
          </style>
         <link
      rel="stylesheet"
      href="style.css"
      type="text/css"
      
    />
      </head>

  <body>
        <style type="text/css">
      .main-container {
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
      }
      code {
        color: inherit;
        background-color: rgba(0, 0, 0, 0.04);
      }
      img {
        max-width: 100%;
        height: auto;
      }
      .tabbed-pane {
        padding-top: 12px;
      }
      button.code-folding-btn:focus {
        outline: none;
      }
    </style>

     
    <div class="container-fluid main-container">
      <!-- tabsets -->
      <script>
        $(document).ready(function () {
          window.buildTabsets("TOC");
        });
      </script>

      <!-- code folding -->
            <style type="text/css">
        .code-folding-btn {
          margin-bottom: 4px;
        }
      </style>
      <script>
        $(document).ready(function () {
                          window.initializeCodeFolding("hide" === "show");
                });
      </script>
         
                    <div class="fluid-row" id="header">
                        <div class="btn-group pull-right">
              <button
                type="button"
                class="btn btn-default btn-xs dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                <span>Show Code</span> <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" style="min-width: 50px">
                                <li><a id="rmd-show-all-code" href="#">Show All Code</a></li>
                <li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li>
                                </ul>
            </div>

                         </div>

              <div class="mycontent">
<div id="definition" class="section level1">
<h1>Definition</h1>
<hr />
<p>A <code>bubble map</code> uses circles of different size to represent
a numeric value on a territory. It displays one bubble per geographic
coordinate, or one bubble per region (in this case the bubble is usually
displayed in the baricentre of the region).</p>
<p>Here is an example showing the geographic position of about <a
href="https://www.data-to-viz.com/story/GPSCoordWithoutValue.html">200k
tweets</a> containing the hashtags #surf, #windsurf or #kitesurf. See
more about this project <a
href="https://www.data-to-viz.com/story/GPSCoordWithoutValue.html">here</a>.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" tabindex="-1"></a><span class="co"># Libraries</span></span>
<span id="cb1-2"><a href="#cb1-2" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb1-3"><a href="#cb1-3" tabindex="-1"></a><span class="fu">library</span>(viridis)</span>
<span id="cb1-4"><a href="#cb1-4" tabindex="-1"></a><span class="fu">library</span>(hrbrthemes)</span>
<span id="cb1-5"><a href="#cb1-5" tabindex="-1"></a><span class="fu">library</span>(mapdata)</span>
<span id="cb1-6"><a href="#cb1-6" tabindex="-1"></a></span>
<span id="cb1-7"><a href="#cb1-7" tabindex="-1"></a><span class="co"># Load dataset from github</span></span>
<span id="cb1-8"><a href="#cb1-8" tabindex="-1"></a>data <span class="ot">&lt;-</span> <span class="fu">read.table</span>(<span class="st">&quot;https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/17_ListGPSCoordinates.csv&quot;</span>, <span class="at">sep=</span><span class="st">&quot;,&quot;</span>, <span class="at">header=</span>T)</span>
<span id="cb1-9"><a href="#cb1-9" tabindex="-1"></a></span>
<span id="cb1-10"><a href="#cb1-10" tabindex="-1"></a><span class="co"># Get the world polygon</span></span>
<span id="cb1-11"><a href="#cb1-11" tabindex="-1"></a>world <span class="ot">&lt;-</span> <span class="fu">map_data</span>(<span class="st">&quot;world&quot;</span>)</span>
<span id="cb1-12"><a href="#cb1-12" tabindex="-1"></a></span>
<span id="cb1-13"><a href="#cb1-13" tabindex="-1"></a><span class="co"># Reformat data: I count the occurence of each unique position</span></span>
<span id="cb1-14"><a href="#cb1-14" tabindex="-1"></a>p <span class="ot">&lt;-</span> data <span class="sc">%&gt;%</span></span>
<span id="cb1-15"><a href="#cb1-15" tabindex="-1"></a>  <span class="fu">mutate</span>(<span class="at">homelat=</span><span class="fu">round</span>(homelat,<span class="dv">1</span>)) <span class="sc">%&gt;%</span></span>
<span id="cb1-16"><a href="#cb1-16" tabindex="-1"></a>  <span class="fu">mutate</span>(<span class="at">homelon=</span><span class="fu">round</span>(homelon,<span class="dv">1</span>)) <span class="sc">%&gt;%</span></span>
<span id="cb1-17"><a href="#cb1-17" tabindex="-1"></a>  <span class="co">#head(1000) %&gt;%</span></span>
<span id="cb1-18"><a href="#cb1-18" tabindex="-1"></a>  <span class="fu">group_by</span>(homelat, homelon, homecontinent) <span class="sc">%&gt;%</span></span>
<span id="cb1-19"><a href="#cb1-19" tabindex="-1"></a>  <span class="fu">summarise</span>(<span class="at">n=</span><span class="fu">n</span>()) <span class="sc">%&gt;%</span></span>
<span id="cb1-20"><a href="#cb1-20" tabindex="-1"></a>  <span class="fu">ggplot</span>() <span class="sc">+</span></span>
<span id="cb1-21"><a href="#cb1-21" tabindex="-1"></a>    <span class="fu">geom_polygon</span>(<span class="at">data =</span> world, <span class="fu">aes</span>(<span class="at">x=</span>long, <span class="at">y =</span> lat, <span class="at">group =</span> group), <span class="at">fill=</span><span class="st">&quot;grey&quot;</span>, <span class="at">alpha=</span><span class="fl">0.1</span>) <span class="sc">+</span></span>
<span id="cb1-22"><a href="#cb1-22" tabindex="-1"></a>    <span class="fu">geom_point</span>(<span class="fu">aes</span>(<span class="at">x=</span>homelon, <span class="at">y=</span>homelat, <span class="at">color=</span>homecontinent, <span class="at">size=</span>n), <span class="at">alpha=</span><span class="fl">0.5</span>) <span class="sc">+</span></span>
<span id="cb1-23"><a href="#cb1-23" tabindex="-1"></a>    <span class="fu">scale_color_viridis</span>(<span class="at">discrete=</span><span class="cn">TRUE</span>, <span class="at">guide=</span><span class="cn">FALSE</span>) <span class="sc">+</span></span>
<span id="cb1-24"><a href="#cb1-24" tabindex="-1"></a>    <span class="fu">scale_size_continuous</span>(<span class="at">range=</span><span class="fu">c</span>(<span class="fl">0.2</span>,<span class="dv">68</span>)) <span class="sc">+</span></span>
<span id="cb1-25"><a href="#cb1-25" tabindex="-1"></a>    <span class="fu">coord_equal</span>() <span class="sc">+</span></span>
<span id="cb1-26"><a href="#cb1-26" tabindex="-1"></a>    <span class="fu">theme_void</span>() <span class="sc">+</span></span>
<span id="cb1-27"><a href="#cb1-27" tabindex="-1"></a>    <span class="fu">theme</span>(</span>
<span id="cb1-28"><a href="#cb1-28" tabindex="-1"></a>        <span class="at">panel.spacing=</span><span class="fu">unit</span>(<span class="fu">c</span>(<span class="dv">0</span>,<span class="dv">0</span>,<span class="dv">0</span>,<span class="dv">0</span>), <span class="st">&quot;null&quot;</span>),</span>
<span id="cb1-29"><a href="#cb1-29" tabindex="-1"></a>        <span class="at">plot.margin=</span>grid<span class="sc">::</span><span class="fu">unit</span>(<span class="fu">c</span>(<span class="dv">0</span>,<span class="dv">0</span>,<span class="dv">0</span>,<span class="dv">0</span>), <span class="st">&quot;cm&quot;</span>),</span>
<span id="cb1-30"><a href="#cb1-30" tabindex="-1"></a>        <span class="at">legend.position=</span><span class="fu">c</span>(<span class="fl">0.15</span>,<span class="fl">0.07</span>),</span>
<span id="cb1-31"><a href="#cb1-31" tabindex="-1"></a>        <span class="at">legend.direction=</span><span class="st">&quot;horizontal&quot;</span></span>
<span id="cb1-32"><a href="#cb1-32" tabindex="-1"></a>    ) <span class="sc">+</span></span>
<span id="cb1-33"><a href="#cb1-33" tabindex="-1"></a>    ggplot2<span class="sc">::</span><span class="fu">annotate</span>(<span class="st">&quot;text&quot;</span>, <span class="at">x =</span> <span class="sc">-</span><span class="dv">165</span>, <span class="at">y =</span> <span class="sc">-</span><span class="dv">30</span>, <span class="at">hjust =</span> <span class="dv">0</span>, <span class="at">size =</span> <span class="dv">11</span>, <span class="at">label =</span> <span class="fu">paste</span>(<span class="st">&quot;Where surfers live.&quot;</span>), <span class="at">color =</span> <span class="st">&quot;Black&quot;</span>) <span class="sc">+</span></span>
<span id="cb1-34"><a href="#cb1-34" tabindex="-1"></a>    ggplot2<span class="sc">::</span><span class="fu">annotate</span>(<span class="st">&quot;text&quot;</span>, <span class="at">x =</span> <span class="sc">-</span><span class="dv">165</span>, <span class="at">y =</span> <span class="sc">-</span><span class="dv">36</span>, <span class="at">hjust =</span> <span class="dv">0</span>, <span class="at">size =</span> <span class="dv">8</span>, <span class="at">label =</span> <span class="fu">paste</span>(<span class="st">&quot;data-to-viz.com | 200,000 #surf tweets recovered&quot;</span>), <span class="at">color =</span> <span class="st">&quot;black&quot;</span>, <span class="at">alpha =</span> <span class="fl">0.5</span>) <span class="sc">+</span></span>
<span id="cb1-35"><a href="#cb1-35" tabindex="-1"></a>    <span class="fu">xlim</span>(<span class="sc">-</span><span class="dv">180</span>,<span class="dv">180</span>) <span class="sc">+</span></span>
<span id="cb1-36"><a href="#cb1-36" tabindex="-1"></a>    <span class="fu">ylim</span>(<span class="sc">-</span><span class="dv">60</span>,<span class="dv">80</span>) <span class="sc">+</span></span>
<span id="cb1-37"><a href="#cb1-37" tabindex="-1"></a>    <span class="fu">scale_x_continuous</span>(<span class="at">expand =</span> <span class="fu">c</span>(<span class="fl">0.006</span>, <span class="fl">0.006</span>)) <span class="sc">+</span></span>
<span id="cb1-38"><a href="#cb1-38" tabindex="-1"></a>    <span class="fu">coord_equal</span>() </span>
<span id="cb1-39"><a href="#cb1-39" tabindex="-1"></a></span>
<span id="cb1-40"><a href="#cb1-40" tabindex="-1"></a><span class="co"># Save at PNG</span></span>
<span id="cb1-41"><a href="#cb1-41" tabindex="-1"></a><span class="fu">ggsave</span>(<span class="st">&quot;IMG/Surfer_bubble.png&quot;</span>, <span class="at">width =</span> <span class="dv">36</span>, <span class="at">height =</span> <span class="fl">15.22</span>, <span class="at">units =</span> <span class="st">&quot;in&quot;</span>, <span class="at">dpi =</span> <span class="dv">90</span>)</span></code></pre></div>
<br><br>
<center>
<img src="IMG/Surfer_bubble.png" alt="img" width="1000" height="700">
</center>
<p><br><br></p>
</div>
<div id="what-for" class="section level1">
<h1>What for</h1>
<hr />
<p>Bubble maps are used with two types of dataset:</p>
<ul>
<li><p>a <em>list of geographic coordinates</em> (longitude and
latitude) and a numeric variable controling the size of the bubble. In
the previous example, the number of tweet at each unique pair of
coordinate was used.</p></li>
<li><p>a <em>list of regions</em> with attributed values and knwon
boundary. In this case, the bubble map will replace the usual <a
href="https://www.data-to-viz.com/graph/choropleth.html">choropleth
map</a>. Note that it allows to avoid the bias caused by different
regional area in choropleth maps. (big regions tend to have more weight
during the observation).</p></li>
</ul>
</div>
<div id="variation" class="section level1">
<h1>Variation</h1>
<hr />
<p>Interactivity is appreciated for bubble maps. It allows to zoom on a
specific part, or click bubbles for more information. Here is an example
showing a feaw earthquacke that happend in the Fiji Region since 1964
(<a
href="https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/quakes.html">data</a>)</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1" tabindex="-1"></a><span class="co"># Library</span></span>
<span id="cb2-2"><a href="#cb2-2" tabindex="-1"></a><span class="fu">library</span>(leaflet)</span>
<span id="cb2-3"><a href="#cb2-3" tabindex="-1"></a> </span>
<span id="cb2-4"><a href="#cb2-4" tabindex="-1"></a><span class="co"># load example data (Fiji Earthquakes) + keep only 100 first lines</span></span>
<span id="cb2-5"><a href="#cb2-5" tabindex="-1"></a><span class="fu">data</span>(quakes)</span>
<span id="cb2-6"><a href="#cb2-6" tabindex="-1"></a>quakes <span class="ot">=</span>  <span class="fu">head</span>(quakes, <span class="dv">100</span>)</span>
<span id="cb2-7"><a href="#cb2-7" tabindex="-1"></a> </span>
<span id="cb2-8"><a href="#cb2-8" tabindex="-1"></a><span class="co"># Create a color palette with handmade bins.</span></span>
<span id="cb2-9"><a href="#cb2-9" tabindex="-1"></a>mybins<span class="ot">=</span><span class="fu">seq</span>(<span class="dv">4</span>, <span class="fl">6.5</span>, <span class="at">by=</span><span class="fl">0.5</span>)</span>
<span id="cb2-10"><a href="#cb2-10" tabindex="-1"></a>mypalette <span class="ot">=</span> <span class="fu">colorBin</span>( <span class="at">palette=</span><span class="st">&quot;YlOrBr&quot;</span>, <span class="at">domain=</span>quakes<span class="sc">$</span>mag, <span class="at">na.color=</span><span class="st">&quot;transparent&quot;</span>, <span class="at">bins=</span>mybins)</span>
<span id="cb2-11"><a href="#cb2-11" tabindex="-1"></a> </span>
<span id="cb2-12"><a href="#cb2-12" tabindex="-1"></a><span class="co"># Prepare the text for the tooltip:</span></span>
<span id="cb2-13"><a href="#cb2-13" tabindex="-1"></a>mytext<span class="ot">=</span><span class="fu">paste</span>(<span class="st">&quot;Depth: &quot;</span>, quakes<span class="sc">$</span>depth, <span class="st">&quot;&lt;br/&gt;&quot;</span>, <span class="st">&quot;Stations: &quot;</span>, quakes<span class="sc">$</span>stations, <span class="st">&quot;&lt;br/&gt;&quot;</span>, <span class="st">&quot;Magnitude: &quot;</span>, quakes<span class="sc">$</span>mag, <span class="at">sep=</span><span class="st">&quot;&quot;</span>) <span class="sc">%&gt;%</span></span>
<span id="cb2-14"><a href="#cb2-14" tabindex="-1"></a>  <span class="fu">lapply</span>(htmltools<span class="sc">::</span>HTML)</span>
<span id="cb2-15"><a href="#cb2-15" tabindex="-1"></a> </span>
<span id="cb2-16"><a href="#cb2-16" tabindex="-1"></a><span class="co"># Final Map</span></span>
<span id="cb2-17"><a href="#cb2-17" tabindex="-1"></a><span class="fu">leaflet</span>(quakes) <span class="sc">%&gt;%</span> </span>
<span id="cb2-18"><a href="#cb2-18" tabindex="-1"></a>  <span class="fu">addTiles</span>()  <span class="sc">%&gt;%</span> </span>
<span id="cb2-19"><a href="#cb2-19" tabindex="-1"></a>  <span class="fu">setView</span>( <span class="at">lat=</span><span class="sc">-</span><span class="dv">27</span>, <span class="at">lng=</span><span class="dv">170</span> , <span class="at">zoom=</span><span class="dv">4</span>) <span class="sc">%&gt;%</span></span>
<span id="cb2-20"><a href="#cb2-20" tabindex="-1"></a>  <span class="fu">addProviderTiles</span>(<span class="st">&quot;Esri.WorldImagery&quot;</span>) <span class="sc">%&gt;%</span></span>
<span id="cb2-21"><a href="#cb2-21" tabindex="-1"></a>  <span class="fu">addCircles</span>(<span class="sc">~</span>long, <span class="sc">~</span>lat, </span>
<span id="cb2-22"><a href="#cb2-22" tabindex="-1"></a>    <span class="at">fillColor =</span> <span class="sc">~</span><span class="fu">mypalette</span>(mag), <span class="at">fillOpacity =</span> <span class="fl">0.7</span>, <span class="at">color=</span><span class="st">&quot;white&quot;</span>, <span class="at">radius=</span><span class="sc">~</span><span class="fu">sqrt</span>(depth)<span class="sc">*</span><span class="dv">3000</span>, <span class="at">stroke=</span><span class="cn">FALSE</span>, <span class="at">weight =</span> <span class="dv">1</span>,</span>
<span id="cb2-23"><a href="#cb2-23" tabindex="-1"></a>    <span class="at">label =</span> mytext,</span>
<span id="cb2-24"><a href="#cb2-24" tabindex="-1"></a>    <span class="at">labelOptions =</span> <span class="fu">labelOptions</span>( <span class="at">style =</span> <span class="fu">list</span>(<span class="st">&quot;font-weight&quot;</span> <span class="ot">=</span> <span class="st">&quot;normal&quot;</span>, <span class="at">padding =</span> <span class="st">&quot;3px 8px&quot;</span>), <span class="at">textsize =</span> <span class="st">&quot;13px&quot;</span>, <span class="at">direction =</span> <span class="st">&quot;auto&quot;</span>)</span>
<span id="cb2-25"><a href="#cb2-25" tabindex="-1"></a>  ) <span class="sc">%&gt;%</span></span>
<span id="cb2-26"><a href="#cb2-26" tabindex="-1"></a>  <span class="fu">addLegend</span>( <span class="at">pal=</span>mypalette, <span class="at">values=</span><span class="sc">~</span>mag, <span class="at">opacity=</span><span class="fl">0.9</span>, <span class="at">title =</span> <span class="st">&quot;Magnitude&quot;</span>, <span class="at">position =</span> <span class="st">&quot;bottomright&quot;</span> )</span></code></pre></div>
<div class="leaflet html-widget html-fill-item" id="htmlwidget-b13b90c255962c1c8bdb" style="width:864px;height:384px;"></div>
<script type="application/json" data-for="htmlwidget-b13b90c255962c1c8bdb">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"&copy; <a href=\"https://openstreetmap.org/copyright/\">OpenStreetMap<\/a>,  <a href=\"https://opendatacommons.org/licenses/odbl/\">ODbL<\/a>"}]},{"method":"addProviderTiles","args":["Esri.WorldImagery",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addCircles","args":[[-20.42,-20.62,-26,-17.97,-20.42,-19.68,-11.7,-28.11,-28.74,-17.47,-21.44,-12.26,-18.54,-21,-20.7,-15.94,-13.64,-17.83,-23.5,-22.63,-20.84,-10.98,-23.3,-30.2,-19.66,-17.94,-14.72,-16.46,-20.97,-19.84,-22.58,-16.32,-15.55,-23.55,-16.3,-25.82,-18.73,-17.64,-17.66,-18.82,-37.37,-15.31,-24.97,-15.49,-19.23,-30.1,-26.4,-11.77,-24.12,-18.97,-18.75,-19.26,-22.75,-21.37,-20.1,-19.85,-22.7,-22.06,-17.8,-24.2,-20.69,-21.16,-13.82,-11.49,-20.68,-17.1,-20.14,-21.96,-20.42,-15.46,-15.31,-19.86,-11.55,-23.74,-17.7,-23.54,-19.21,-12.11,-21.81,-28.98,-34.02,-23.84,-19.57,-20.12,-17.7,-19.66,-21.5,-23.64,-15.43,-15.41,-15.48,-13.36,-20.64,-19.72,-15.44,-19.73,-27.24,-18.16,-13.66,-24.57],[181.62,181.03,184.1,181.66,181.96,184.31,166.1,181.93,181.74,179.59,180.69,167,182.11,181.66,169.92,184.95,165.96,181.5,179.78,180.31,181.16,166.32,180.16,182,180.28,181.49,167.51,180.79,181.47,182.37,179.24,166.74,185.05,180.8,186,179.33,169.23,181.28,181.4,169.33,176.78,186.1,179.82,186.04,169.41,182.3,181.7,166.32,180.08,185.25,182.35,184.42,173.2,180.67,182.16,182.13,181,180.6,181.35,179.2,181.55,182.4,172.38,166.22,181.41,184.93,181.6,179.62,181.86,187.81,185.8,184.35,166.2,179.99,181.23,180.04,184.7,167.06,181.71,181.11,180.21,180.99,182.38,183.4,181.7,184.31,170.5,179.96,186.3,186.44,167.53,167.06,182.02,169.71,185.26,182.4,181.11,183.41,166.54,179.92],[71119.61754677819,76485.29270389177,19442.22209522358,75059.97601918082,76426.43521714197,41892.72013130682,27166.15541441225,41785.16483155236,43577.51713900185,74819.78348003955,72436.17880589783,47339.2015141785,70611.61377563892,73484.69228349534,35369.47836765479,52478.5670536077,21213.20343559643,72869.74680894671,71624.01831787993,73362.1155638249,72000,43577.51713900185,67882.25099390857,33541.01966249684,62281.61847608008,69519.7813575388,37349.6987939662,66947.74081326419,72374.02849088892,54332.31082882451,70547.85609782908,21213.20343559643,51264.02247190518,56044.62507680822,20784.60969082653,73484.69228349534,43058.10028322197,71874.89130426563,72560.31973468694,45497.2526643093,48651.82422068057,29393.87691339813,67815.92733274389,29086.07914449798,47053.16142407437,22449.94432064365,54415.07144165116,25099.80079602227,66610.80993352356,34073.45007480164,70611.61377563892,44799.55356920423,20346.98994937581,73054.77397131553,66340.03316248795,71119.61754677819,63285.06932918696,72498.27584156743,69390.20103732226,69065.18659932802,72374.02849088892,48373.5464897913,74276.51041883968,27495.45416973504,73054.77397131553,50734.60357586329,72684.24863751431,75119.90415329349,69065.18659932802,18973.66596101028,36986.48401781385,42532.34063627347,29393.87691339813,67483.33127521195,70099.92867328753,71246.0525222275,42107.0065428546,48836.46178829912,53916.60226683428,52306.78732248809,25980.76211353316,57471.73218200405,72187.25649309579,50556.89863905816,63639.61030678928,39115.21443121589,32449.9614791759,69584.48102845921,33271.60951922825,24919.87158875422,33941.12549695429,46086.87448721164,66880.49042882386,49386.23289946299,44899.8886412873,58094.75019311125,57314.9195236284,52478.5670536077,21213.20343559643,66000],null,null,{"interactive":true,"className":"","stroke":false,"color":"white","weight":1,"opacity":0.5,"fill":true,"fillColor":["#FED98E","#FFFFD4","#FE9929","#FFFFD4","#FFFFD4","#FFFFD4","#FED98E","#FFFFD4","#FED98E","#FFFFD4","#FFFFD4","#FED98E","#FFFFD4","#FFFFD4","#993404","#FFFFD4","#993404","#FED98E","#FFFFD4","#FFFFD4","#FED98E","#FFFFD4","#FFFFD4","#FED98E","#FE9929","#FFFFD4","#FED98E","#FE9929","#FED98E","#FFFFD4","#FED98E","#FED98E","#FED98E","#FFFFD4","#FED98E","#FFFFD4","#FED98E","#FED98E","#FFFFD4","#FFFFD4","#FED98E","#FED98E","#FFFFD4","#FFFFD4","#FED98E","#FED98E","#FED98E","#FFFFD4","#FFFFD4","#FE9929","#FFFFD4","#FFFFD4","#FED98E","#FFFFD4","#FFFFD4","#FFFFD4","#FED98E","#FFFFD4","#FFFFD4","#FFFFD4","#FED98E","#FFFFD4","#FE9929","#FED98E","#FED98E","#FED98E","#FFFFD4","#FE9929","#FED98E","#D95F0E","#FFFFD4","#FED98E","#FFFFD4","#FE9929","#FFFFD4","#FFFFD4","#FFFFD4","#FED98E","#FFFFD4","#FE9929","#FE9929","#FED98E","#FED98E","#FFFFD4","#FFFFD4","#FFFFD4","#FED98E","#FED98E","#FFFFD4","#FFFFD4","#FE9929","#FED98E","#FE9929","#FFFFD4","#FFFFD4","#FFFFD4","#FED98E","#FE9929","#FE9929","#FED98E"],"fillOpacity":0.7},null,null,["Depth: 562<br/>Stations: 41<br/>Magnitude: 4.8","Depth: 650<br/>Stations: 15<br/>Magnitude: 4.2","Depth: 42<br/>Stations: 43<br/>Magnitude: 5.4","Depth: 626<br/>Stations: 19<br/>Magnitude: 4.1","Depth: 649<br/>Stations: 11<br/>Magnitude: 4","Depth: 195<br/>Stations: 12<br/>Magnitude: 4","Depth: 82<br/>Stations: 43<br/>Magnitude: 4.8","Depth: 194<br/>Stations: 15<br/>Magnitude: 4.4","Depth: 211<br/>Stations: 35<br/>Magnitude: 4.7","Depth: 622<br/>Stations: 19<br/>Magnitude: 4.3","Depth: 583<br/>Stations: 13<br/>Magnitude: 4.4","Depth: 249<br/>Stations: 16<br/>Magnitude: 4.6","Depth: 554<br/>Stations: 19<br/>Magnitude: 4.4","Depth: 600<br/>Stations: 10<br/>Magnitude: 4.4","Depth: 139<br/>Stations: 94<br/>Magnitude: 6.1","Depth: 306<br/>Stations: 11<br/>Magnitude: 4.3","Depth: 50<br/>Stations: 83<br/>Magnitude: 6","Depth: 590<br/>Stations: 21<br/>Magnitude: 4.5","Depth: 570<br/>Stations: 13<br/>Magnitude: 4.4","Depth: 598<br/>Stations: 18<br/>Magnitude: 4.4","Depth: 576<br/>Stations: 17<br/>Magnitude: 4.5","Depth: 211<br/>Stations: 12<br/>Magnitude: 4.2","Depth: 512<br/>Stations: 18<br/>Magnitude: 4.4","Depth: 125<br/>Stations: 22<br/>Magnitude: 4.7","Depth: 431<br/>Stations: 57<br/>Magnitude: 5.4","Depth: 537<br/>Stations: 15<br/>Magnitude: 4","Depth: 155<br/>Stations: 18<br/>Magnitude: 4.6","Depth: 498<br/>Stations: 79<br/>Magnitude: 5.2","Depth: 582<br/>Stations: 25<br/>Magnitude: 4.5","Depth: 328<br/>Stations: 17<br/>Magnitude: 4.4","Depth: 553<br/>Stations: 21<br/>Magnitude: 4.6","Depth: 50<br/>Stations: 30<br/>Magnitude: 4.7","Depth: 292<br/>Stations: 42<br/>Magnitude: 4.8","Depth: 349<br/>Stations: 10<br/>Magnitude: 4","Depth: 48<br/>Stations: 10<br/>Magnitude: 4.5","Depth: 600<br/>Stations: 13<br/>Magnitude: 4.3","Depth: 206<br/>Stations: 17<br/>Magnitude: 4.5","Depth: 574<br/>Stations: 17<br/>Magnitude: 4.6","Depth: 585<br/>Stations: 17<br/>Magnitude: 4.1","Depth: 230<br/>Stations: 11<br/>Magnitude: 4.4","Depth: 263<br/>Stations: 34<br/>Magnitude: 4.7","Depth: 96<br/>Stations: 32<br/>Magnitude: 4.6","Depth: 511<br/>Stations: 23<br/>Magnitude: 4.4","Depth: 94<br/>Stations: 26<br/>Magnitude: 4.3","Depth: 246<br/>Stations: 27<br/>Magnitude: 4.6","Depth: 56<br/>Stations: 34<br/>Magnitude: 4.9","Depth: 329<br/>Stations: 24<br/>Magnitude: 4.5","Depth: 70<br/>Stations: 18<br/>Magnitude: 4.4","Depth: 493<br/>Stations: 21<br/>Magnitude: 4.3","Depth: 129<br/>Stations: 73<br/>Magnitude: 5.1","Depth: 554<br/>Stations: 13<br/>Magnitude: 4.2","Depth: 223<br/>Stations: 15<br/>Magnitude: 4","Depth: 46<br/>Stations: 26<br/>Magnitude: 4.6","Depth: 593<br/>Stations: 13<br/>Magnitude: 4.3","Depth: 489<br/>Stations: 16<br/>Magnitude: 4.2","Depth: 562<br/>Stations: 31<br/>Magnitude: 4.4","Depth: 445<br/>Stations: 17<br/>Magnitude: 4.5","Depth: 584<br/>Stations: 11<br/>Magnitude: 4","Depth: 535<br/>Stations: 23<br/>Magnitude: 4.4","Depth: 530<br/>Stations: 12<br/>Magnitude: 4.3","Depth: 582<br/>Stations: 35<br/>Magnitude: 4.7","Depth: 260<br/>Stations: 12<br/>Magnitude: 4.1","Depth: 613<br/>Stations: 61<br/>Magnitude: 5","Depth: 84<br/>Stations: 32<br/>Magnitude: 4.6","Depth: 593<br/>Stations: 40<br/>Magnitude: 4.9","Depth: 286<br/>Stations: 25<br/>Magnitude: 4.7","Depth: 587<br/>Stations: 13<br/>Magnitude: 4.1","Depth: 627<br/>Stations: 45<br/>Magnitude: 5","Depth: 530<br/>Stations: 27<br/>Magnitude: 4.5","Depth: 40<br/>Stations: 91<br/>Magnitude: 5.5","Depth: 152<br/>Stations: 11<br/>Magnitude: 4","Depth: 201<br/>Stations: 30<br/>Magnitude: 4.5","Depth: 96<br/>Stations: 14<br/>Magnitude: 4.3","Depth: 506<br/>Stations: 75<br/>Magnitude: 5.2","Depth: 546<br/>Stations: 35<br/>Magnitude: 4.4","Depth: 564<br/>Stations: 15<br/>Magnitude: 4.3","Depth: 197<br/>Stations: 11<br/>Magnitude: 4.1","Depth: 265<br/>Stations: 23<br/>Magnitude: 4.5","Depth: 323<br/>Stations: 15<br/>Magnitude: 4.2","Depth: 304<br/>Stations: 60<br/>Magnitude: 5.3","Depth: 75<br/>Stations: 65<br/>Magnitude: 5.2","Depth: 367<br/>Stations: 27<br/>Magnitude: 4.5","Depth: 579<br/>Stations: 38<br/>Magnitude: 4.6","Depth: 284<br/>Stations: 15<br/>Magnitude: 4.3","Depth: 450<br/>Stations: 11<br/>Magnitude: 4","Depth: 170<br/>Stations: 15<br/>Magnitude: 4.3","Depth: 117<br/>Stations: 32<br/>Magnitude: 4.7","Depth: 538<br/>Stations: 26<br/>Magnitude: 4.5","Depth: 123<br/>Stations: 16<br/>Magnitude: 4.2","Depth: 69<br/>Stations: 42<br/>Magnitude: 4.3","Depth: 128<br/>Stations: 61<br/>Magnitude: 5.1","Depth: 236<br/>Stations: 22<br/>Magnitude: 4.7","Depth: 497<br/>Stations: 64<br/>Magnitude: 5.2","Depth: 271<br/>Stations: 14<br/>Magnitude: 4.2","Depth: 224<br/>Stations: 21<br/>Magnitude: 4.2","Depth: 375<br/>Stations: 18<br/>Magnitude: 4","Depth: 365<br/>Stations: 21<br/>Magnitude: 4.5","Depth: 306<br/>Stations: 54<br/>Magnitude: 5.2","Depth: 50<br/>Stations: 45<br/>Magnitude: 5.1","Depth: 484<br/>Stations: 33<br/>Magnitude: 4.7"],{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"13px","textOnly":false,"style":{"font-weight":"normal","padding":"3px 8px"},"className":"","sticky":true},null,null]},{"method":"addLegend","args":[{"colors":["#FFFFD4","#FED98E","#FE9929","#D95F0E","#993404"],"labels":["4.0 &ndash; 4.5","4.5 &ndash; 5.0","5.0 &ndash; 5.5","5.5 &ndash; 6.0","6.0 &ndash; 6.5"],"na_color":null,"na_label":"NA","opacity":0.9,"position":"bottomright","type":"bin","title":"Magnitude","extra":null,"layerId":null,"className":"info legend","group":null}]}],"setView":[[-27,170],4,[]],"limits":{"lat":[-37.37,-10.98],"lng":[165.96,187.81]}},"evals":[],"jsHooks":[]}</script>
</div>
<div id="mistake" class="section level1">
<h1>Common mistakes</h1>
<hr />
<ul>
<li><p>As for <a
href="https://www.data-to-viz.com/graph/bubble.html">bubble charts</a>,
the size of bubbles must be mapped to its area, <a
href="https://www.data-to-viz.com/caveat/radius_or_area.html">not to its
radius</a>. If not it exagerates differences. <a
href="https://www.data-to-viz.com/caveat/radius_or_area.html">See
more</a>.</p></li>
<li><p>Mind <a
href="https://www.data-to-viz.com/caveat/overplotting.html">overplotting</a>.
In any case, it is a good practice to set up a bit of transparency for
each bubble, allowing to see the map behind it.</p></li>
<li><p>Don’t forget your legend to make the link between bubble size and
numeric value.</p></li>
</ul>
</div>
<div id="related" class="section level1">
<h1>Related</h1>
<hr />
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="https://www.data-to-viz.com/graph/choropleth.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img  src="https://github.com/holtzy/data_to_viz/raw/master/img/section/ChoroplethSmall.png">
<p class="mytitlerelated">
Choropleth
</p>
<p class="mytextrelated">
Display a aggregated value for each region of the map using color
gradients.
</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="https://www.data-to-viz.com/graph/cartogram.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img  src="https://github.com/holtzy/data_to_viz/raw/master/img/section/CartogramSmall.png">
<p class="mytitlerelated">
Cartogram
</p>
<p class="mytextrelated">
A circular version of a Treemap to visualize a hierarchical organization
</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="https://www.data-to-viz.com/graph/hexbinmap.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img  src="https://github.com/holtzy/data_to_viz/raw/master/img/section/MapHexbinSmall.png">
<p class="mytitlerelated">
Hexbin map
</p>
<p class="mytextrelated">
Split the geographic area in a set of hexagon and display an aggregated
value for each
</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="https://www.data-to-viz.com/graph/map.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img  src="https://github.com/holtzy/data_to_viz/raw/master/img/section/MapSmall.png">
<p class="mytitlerelated">
Background Map
</p>
<p class="mytextrelated">
The basis for any geographic data visualization is to build a good
background map.
</p>
</a>
</div>
</div>
</div>
<div id="code" class="section level1">
<h1>Build your own</h1>
<hr />
<p>The <a href="https://r-graph-gallery.com/bubble-map.html">R</a>, <a
href="https:/python-graph-gallery.com/bubble-map/">Python</a>, <a
href="https://www.react-graph-gallery.com/bubble-map">React</a> and <a
href="https://d3-graph-gallery.com/bubblemap.html">D3</a> graph
galleries are 4 websites providing hundreds of chart example, always
providing the reproducible code. Click the button below to see how to
build the chart you need with your favorite programing language.</p>
<p>
<a href="https://r-graph-gallery.com/bubble-map.html/" class="btn btn-primary">R
graph gallery</a>
<a href="https://python-graph-gallery.com/bubble-map/" class="btn btn-primary">Python
gallery</a>
<a href="https://www.react-graph-gallery.com/bubble-map" class="btn btn-primary">React
gallery</a>
<a href="https://d3-graph-gallery.com/bubblemap.html" class="btn btn-primary">D3
gallery</a>
</p>
</div>
</div>

          <section
            id="form"
            style="
              margin-top: 70px;
              padding-bottom: 70px;
              padding-top: 70px;
              background-color: #f8f9fa;
            "
          >
            <div class="container">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <h2 style="font-size: 44px" class="text-center">
                  Dataviz decision tree
                </h2>
                <p
                  class="text-center"
                  style="max-width: 600px; font-size: 18px"
                >
                  <a href="https://www.data-to-viz.com">Data To Viz</a> is a
                  comprehensive <b>classification of chart types</b> organized
                  by data input format. Get a high-resolution version of our
                  decision tree delivered to your inbox now!
                </p>
                <div
                  style="
                    margin-top: -50px;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                  "
                >
                  <script
                    async
                    data-uid="8010f15fd2"
                    src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"
                  ></script>
                </div>
                <br />
                <div class="text-center">
                  <img
                    class="img-fluid"
                    src="../img/poster/poster_small.png"
                    alt="High Resolution Poster"
                    style="max-width: 400px"
                  />
                </div>
              </div>
            </div>
          </section>

           &nbsp;
<hr />
<p style="text-align: center;">A work by <a href="https://www.yan-holtz.com/">Yan Holtz</a> for <a href="https://data-to-viz.com">data-to-viz.com</a></p>

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Add font awesome icons -->
<p style="text-align: center;">
	<a href="https://twitter.com/r_graph_gallery?lang=en" class="fa fa-twitter"></a>
	<a href="https://www.linkedin.com/in/yan-holtz-2477534a/" class="fa fa-linkedin"></a>
	<a href="https://github.com/holtzy/" class="fa fa-github"></a>
</p>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-79254642-3');
</script>
<script>
var getOutboundLink = function(url) {
	gtag('event', 'click', {
		'event_category': 'outbound',
		'event_label': url,
		'transport_type': 'beacon',
		'event_callback': function(){document.location = url;}
	});
}
</script>

&nbsp;                </div>

    <script>

      // add bootstrap table styles to pandoc tables
      function bootstrapStylePandocTables() {
        $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
      }
      $(document).ready(function () {
        bootstrapStylePandocTables();
      });

          </script>
       </body>
</html>
